<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="layui/css/adminLogin.css">

</head>
<body>
<div class="wrap">
    <img src="images/backgroud.jpg" class="imgStyle">
    <div class="loginForm">
        <form>
            <div class="logoHead">
                <h1 style="margin-top: 15px">电商平台管理系统</h1>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>用户名:</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-icon-username adminIcon"></i>
                    <input id="loginUsername" class="layui-input adminInput" type="text" name="uname"
                           placeholder="输入用户名" value="admin">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>密码:</label>
                </div>
                <div class="passwordDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input id="loginPassword" class="layui-input adminInput" type="password" name="upass"
                           placeholder="输入密码" value="admin">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>验证码:</label>
                </div>
                <div class="cardDiv">
                    <input id="loginCard" class="layui-input cardInput" type="text" name="card" placeholder="输入验证码">
                </div>

                <div class="codeDiv">
                    <input id="loginCode" class="layui-input codeInput" type="button">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div><p style="color: red;text-align: center" id="loginMsg"></p></div>
                <div class="submitLabel">
                    <label>没有账号？<a href="#" id="loginRegister">点击注册</a></label>
                </div>
                <div class="submitDiv">
                    <input id="loginBtn" type="button" class="submit layui-btn layui-btn-primary" value="登录"></input>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="layui/layui.js" type="text/javascript"></script>
<script src="js/jquery-2.2.3.min.js"></script>
<script>
    layui.use(['layer'], function () {
        var layer = layui.layer;
    })
    $(function () {
        // 页面初始化生成验证码
        window.onload = createCode('#loginCode');
        // 验证码切换
        $('#loginCode').click(function () {
            createCode('#loginCode');
        });
        // 登陆事件
        $('#loginBtn').click(function () {
            login();
        });
        // 注册事件
        $('#loginRegister').click(function () {
            register();
        });
    });

    // 生成验证码
    function createCode(codeID) {
        var code = "";
        // 验证码长度
        var codeLength = 4;
        // 验证码dom元素
        var checkCode = $(codeID);
        // 验证码随机数
        var random = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
            'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
        for (var i = 0; i < codeLength; i++) {
            // 随机数索引
            var index = Math.floor(Math.random() * 36);
            code += random[index];
        }
        // 将生成的随机验证码赋值
        checkCode.val(code);
    }

    // 校验验证码、用户名、密码
    function validateCode(inputID, codeID) {
        var inputCode = $(inputID).val().toUpperCase();
        var cardCode = $(codeID).val();
        var loginUsername = $('#loginUsername').val();
        var loginPassword = $('#loginPassword').val();
        if ($.trim(loginUsername) == '' || $.trim(loginUsername).length <= 0) {
            layer.alert("用户名不能为空");
            return false;
        }
        if ($.trim(loginPassword) == '' || $.trim(loginPassword).length <= 0) {
            layer.alert("密码不能为空");
            return false;
        }
        if (inputCode.length <= 0) {
            layer.alert("验证码不能为空");
            return false;
        }
        if (inputCode != cardCode) {
            layer.alert("请输入正确验证码");
            return false;
        }
        return true;
    }

    // 登录流程
    function login() {
        if (!validateCode('#loginCard', '#loginCode')) {
            //阻断提示
        } else {
            var loginUsername = $('#loginUsername').val();
            var loginPassword = $('#loginPassword').val();
            var params = {};
            params.uname = loginUsername;
            params.upass = loginPassword;
            var loginLoadIndex = layer.load(2);
            $('#loginBtn').val("正在登录...");
            $.ajax({
                type: 'post',
                url: "adminLogin",
                dataType: 'html',
                data: JSON.stringify(params),
                contentType: 'application/json',
                success: function (data) {
                    layer.close(loginLoadIndex);
                    var jsonData = JSON.parse(data);
                    if (jsonData.code != null) {
                        alert(jsonData.msg);
                        $("#loginMsg").text(jsonData.msg);
                    }
                    if (jsonData.code == "0") {
                        window.location.href = 'menuList';
                    }
                    $('#loginBtn').val("重新登录");
                },
                error: function () {
                    alert("网络异常，请稍后重试！");
                    layer.close(loginLoadIndex);
                    $('#loginBtn').val("登录");
                }
            });
        }

    }

    // 注册流程
    function register() {
        layer.open({
            type: '1',
            content: $('.registerPage'),
            title: '注册',
            area: ['530px', '550px'],
            btn: ['注册', '重置', '取消'],
            closeBtn: '1',
            btn1: function (index, layero) {
                //注册回调
                layer.close(index);
                var registerUsername = $('#registerUsername').val();
                var registerPassword = $('#registerPassword').val();
                var registerWellPassword = $('#registerWellPassword').val();
                var tele = $('#tele').val();
                var wechat = $('#wechat').val();
                var selectValue = $('#roleSelect option:selected').val();
                var params = {};
                params.uname = registerUsername;
                params.upass = registerPassword;
                params.checkPwd = registerWellPassword;
                params.tele = tele;
                params.wechat = wechat;
                params.roleid = selectValue;
                var registerLoadIndex = layer.load(2);
                $.ajax({
                    type: 'post',
                    // url: window.location.protocol + '//' + window.location.host + '/security-web/register.do',
                    url: "/register",
                    dataType: 'json',
                    data: JSON.stringify(params),
                    contentType: 'application/json',
                    success: function (data) {
                        layer.close(registerLoadIndex);
                        layer.msg(data.msg);
                    },
                    error: function () {
                        layer.close(registerLoadIndex);
                        layer.alert("请求超时！")
                    }
                });
            },
            btn2: function (index, layero) {
                //重置回调
                var registerUsername = $('#registerUsername').val("");
                var registerPassword = $('#registerPassword').val("");
                var registerWellPassword = $('#registerWellPassword').val("");
                // 防止注册页面关闭
                return false;
            },
            btn3: function (index, layero) {
                //取消回调
            }
        })
    }
</script>
</body>
<!--注册弹窗-->
<div class="registerPage">
    <div class="registerDiv">
        <form action="/register" method="post">
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>用户名:</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-icon-username adminIcon"></i>
                    <input id="registerUsername" class="layui-input adminInput" type="text" name="username"
                           placeholder="输入用户名">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>密码:</label>
                </div>
                <div class="passwordDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input id="registerPassword" class="layui-input adminInput" type="password" name="password"
                           placeholder="输入密码">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>确认密码:</label>
                </div>
                <div class="passwordDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input id="registerWellPassword" class="layui-input adminInput" type="password" name="password"
                           placeholder="输入密码">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>手机号:</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-icon-username adminIcon"></i>
                    <input id="tele" class="layui-input adminInput" type="text" name="tele"
                           placeholder="输入手机号">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>微信号:</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-icon-username adminIcon"></i>
                    <input id="wechat" class="layui-input adminInput" type="text" name="wechat"
                           placeholder="输入微信号">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>角色类型:</label>
                </div>
                <div class="passwordDiv">
                    <select id="roleSelect" class="layui-select">
                        <option value="" selected disabled>请选择</option>
                        <option value="1">超级管理员</option>
                        <option value="2">后台管理员</option>
                    </select>
                </div>
            </div>
        </form>
    </div>
</div>
</html>
